<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 5000px;
            width: 5000px;
        }
    </style>
</head>
<body>


    <script>

        //需求：封装一个兼容的scroll().返回值是json，用scroll().top获取scrollTop
        //需求：封装一个兼容的scroll().返回值是json，用scroll().left获取scrollLeft

        window.onscroll = function () {
//        var json = scroll();
//        json.top;
            console.log(scroll().top);
            console.log(scroll().left);
        }



        function scroll(){
            //如果这个属性存在，那么返回值应该是0-无穷大
            //如果没有返回值是undefined；
            //只要判断不是undefined就可以调用此方法
            //练习使用此种封装
            if(window.pageYOffset !== undefined){
//                var json = {
//                    "top": window.pageYOffset,
//                    "left": window.pageXOffset
//                };
//                return json;
                return {
                    "top": window.pageYOffset,
                    "left": window.pageXOffset
                };
            }else if(document.compatMode === "CSS1Compat"){
                return {
                    "top": document.documentElement.scrollTop,
                    "left": document.documentElement.scrollLeft
                };
            }else{
                return {
                    "top": document.body.scrollTop,
                    "left": document.body.scrollLeft
                };
            }

            //简单封装（实际工作使用）
//            return {
//                "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
//                "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
//            }
        }

		window.onscroll = function(){
			console.log(scroll().top);
			console.log(scroll().left);
		}
		function scroll(){
			if(window.pageYofset !== undefined){
// 				var json = {
// 					"top":window.pageYOffset,
// 					"left":window.pageXOffset
// 				};
				// return json;
				return {
					"top":window.pageYOffset,
					"left":window.pageXOffset
				};
			}else if(document.compatMode === "CSS1Compat"){
				return {
					"top": document.documentElement.scrollTop,
					"left": document.documentElement.scrollLeft
				};
			}else{
				return{
					"top": document.body.scrollTop,
					"left": document.body.scrollLeft
				};
			}
			return{
				"top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
				"left": window.pageXoffset || document.body.scrollLeft || document.documentElement.scrollLeft
			};
		}
    </script>
</body>
</html>